<template>
  <div class="agent-call-manage">
    <div class="tool">
      <div class="" style="float: left">
        <span @click.stop="addAgent" class="main-color"><i class="el-icon-plus"></i><span>添加</span></span>
        <span @click.stop="exportData" class="main-color margin-l-10"><i class="iconfont icon-daochu1"></i><span>导出</span></span>
        <span @click.stop="reshList" class="main-color margin-l-10"><i class="iconfont icon-shuaxin"></i><span>刷新</span></span>
        <span class="main-color margin-l-10">
          <el-dropdown trigger="click" @command="moreOperate">
            <span class="el-dropdown-link main-color">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="move">迁移座席</el-dropdown-item>
              <el-dropdown-item command="batchAdd">批量添加</el-dropdown-item>
              <el-dropdown-item command="editNum" v-if="flag !== 'ecommerce'">批量修改外显号</el-dropdown-item>
              <el-dropdown-item command="editVer">批量修改座席使用版本</el-dropdown-item>
              <el-dropdown-item command="batchDisable">批量停用</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
        <el-input
          style="width: 300px"
          class="margin-l-10"
          size="mini"
          placeholder="请输入座席名称或工号"
          @keyup.native.enter="handlerClick"
          v-model.trim="query">
          <i
            class="el-input__icon el-icon-search"
            slot="suffix"
            @click="handlerClick">
          </i>
        </el-input>
        <el-popover
          placement="bottom"
          width="540"
          trigger="click"
        >
          <div style="font-size: 12px; padding: 5px;line-height:20px">
            <div>
              <div style="float: left">工号：</div>
              <el-input v-model.trim="search.start" style="width: 200px"></el-input> —— <el-input v-model.trim="search.end" style="width: 200px"></el-input>
            </div>
            <div class="margin-t-15">
              <div style="float: left">使用版本：</div>
              <el-select v-model="search.version" placeholder="请选择">
                <el-option
                  v-for="item in licenceType"
                  :key="item.code_value"
                  :label="item.code_name"
                  :value="item.code_value">
                </el-option>
              </el-select>
            </div>
            <div class="margin-t-15" v-if="flag !== 'ecommerce'">
              <div style="float: left">外显号：</div>
              <el-input v-model.trim="search.externalNumber" style="width: 400px"></el-input>
            </div>
            <div style="text-align: center;margin-top: 20px">
              <el-button class='primary_btn' type="primary" @click='searchAgent'>
                查询
              </el-button>
            </div>
          </div>
          <span slot="reference" class="main-color margin-l-10">高级搜索</span>
        </el-popover>
      </div>
      <div class="pag-wapper" style="float: right">
        <pagination
          style="float: left"
          :small="true"
          :currentPage="currentPage"
          :count="count"
          @turnPage="trunPages"
          :totalPage="Math.ceil(count/10)">
        </pagination>
      </div>
    </div>
    <div class="table-wapper">
      <el-table
        :data="listData"
        size="mini"
        highlight-current-row
        stripe
        style="width: 100%">
        <el-table-column label="座席名称"><template scope="scope">{{ scope.row.displayName }}</template></el-table-column>
        <el-table-column label="座席工号"><template scope="scope">{{ scope.row.exten }}</template></el-table-column>
        <el-table-column label="使用版本"><template scope="scope">{{ handleVersion(scope.row.uversion) }}</template></el-table-column>
        <el-table-column label="状态"><template scope="scope">
          <div v-html="scope.row.status === 'disable' ? '已停用' : '已启用'"
               :class="scope.row.status === 'disable' ? 'pink' : 'main-color'"></div>
         </template>
        </el-table-column>
        <el-table-column label="最后更新时间"><template scope="scope">{{ getAgentLastUpdateTime(scope.row.lastUpdate) }}</template></el-table-column>
        <el-table-column label="操作" width="150">
          <template scope="scope">
            <span class="main-color" v-if="scope.row.status === 'disable'" @click="handleEnable(scope.row)">启用</span>
            <span v-else class="pink" @click="handledisEnable(scope.row)">停用</span>
            <el-button type="text" class="margin-l-10" size="small" @click="handleEdit(scope.row)">{{$t('public.edit')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <leftSlide :visible.sync='slideLeft' :title="title" @saveClick="handleSaveCLick" @cancelClick="cancelClick" :showFooter="showFooter">
      <div style="margin: 20px">
        <div v-if="section === 'add' || section === 'edit'">
          <addOrEditAgent ref="addOrEditAgent" :licenceType="licenceType" :roles="roles"  @addAgentSuccess="batchSuccess"></addOrEditAgent>
        </div>
        <div v-if="section === 'move'">
          <batchMoveAgents ref="batchMoveAgents" @batchMoveAgentsSuccess="batchMoveAgentsSuccess"></batchMoveAgents>
        </div>
        <div v-if="section === 'batchAdd'">
          <batchAddAgents ref="batchAddAgents" :licenceType="licenceType" @batchAddAgentsSuccess="batchSuccess"></batchAddAgents>
        </div>
        <div v-if="section === 'editNum'">
          <div class="prompt">
            请注意: 坐席和外显号以英文冒号隔开，每组坐席与外显号以分号或者回车隔开。 <br/>
            例如:<br/>
            8000:0108059****;8001:0108069****<br/>
            或者:<br/>
            8000:0108059****<br/>
            8001:0108069****<br/>
          </div>
          <div class="margin-t-15">
            <el-form ref="numForm" :model="numForm" :rules="rules" labelPosition="top">
              <el-form-item label="" prop="numStr">
                <el-input type="textarea" v-model="numForm.numStr"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div v-if="section === 'editVer'">
          <el-form ref="editVer" :model="verForm" :rules="rules" labelPosition="top">
            <el-form-item label="使用版本" prop="batchVersion">
              <el-select v-model="verForm.batchVersion" placeholder="请选择">
                <el-option
                  v-for="item in licenceType"
                  :key="item.code_value"
                  :label="item.code_name"
                  :value="item.code_value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="section === 'batchDisable'">
          <agentBatchDisable ref="agentBatchDisable" :licenceType="licenceType" @batchDisableSuccess="batchSuccess1"></agentBatchDisable>
        </div>
      </div>
    </leftSlide>
  </div>
</template>
<script>
  import addOrEditAgent from '@/components/business-modules/newConfig/callCenter/base/addOrEditAgent.vue'
  import AgentTreeSelect from '@/components/public-modules/agent-tree/AgentTreeSelect.vue'
  import Agent from '@/components/public-modules/cache/Agent'
  import { deepClone, ivrSearch } from '@/utils/m7Utils.js'
  import Pagination from '@/components/public-modules/card/Pagination'
  import leftSlide from '@/components/ui-modules/newConfig/leftSlide.vue'
  import agentBatchDisable from '@/components/business-modules/newConfig/callCenter/base/agentBatchDisable.vue'
  import batchAddAgents from '@/components/business-modules/newConfig/callCenter/base/batchAddAgents.vue'
  import batchMoveAgents from '@/components/business-modules/newConfig/callCenter/base/batchMoveAgents.vue'
  export default {
    name: 'agentCallManage',
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        showFooter: true,
        searchArr: [],
        verForm: {
          batchVersion: ''
        },
        numForm: {
          numStr: ''
        },
        batchVersion: '',
        search: {
          start: '',
          end: '',
          version: '',
          externalNumber: ''
        },
        licenceType: [],
        section: '',
        title: '',
        rules: {
          numStr: { required: true, message: '请写入需要修改的坐席工号和对应的外显号码', trigger: 'blur' },
          batchVersion: { required: true, message: '请输入使用版本', trigger: 'change' }
        },
        roles: [],
        slideLeft: false,
        count: 0,
        currentPage: 1,
        query: '',
        listData: [],
        dataList: [],
        currentObj: {},
        oldPBX: '',
        uversion: '',
        addRole: '',
        currPbxstatus: {
          title: '',
          type: ''
        }
      }
    },
    components: {
      addOrEditAgent,
      batchMoveAgents,
      batchAddAgents,
      agentBatchDisable,
      Agent,
      Pagination,
      leftSlide,
      AgentTreeSelect
    },
    watch: {
      pbx () {
        let routerName = this.$route.meta.title
        if (routerName === 'agentCallManage') {
          console.log('agentCallmanage')
          this.reshList()
          this.getCurrPbxState()
        }
      }
    },
    computed: {
      pbx () {
        return this.$store.state.config.callCenter.currentPBX
      }
    },
    methods: {
      getAgentLastUpdateTime (time) {
        let da = new Date(parseInt(time))
        let year = da.getFullYear() + '年'
        let month = da.getMonth() + 1 + '月'
        let date = da.getDate() + '日'
        return [year, month, date].join(' ')
      },
      batchMoveAgentsSuccess () {
        this.showFooter = false
      },
      handleEdit (row) {
        this.slideLeft = true
        this.currentObj = row
        console.log(row)
        this.section = 'edit'
        this.showFooter = true
        this.title = '修改座席'
        const _form = {
          inheritedFrom: row.inheritedFrom,
          uversion: row.uversion,
          AutoBusyTime: row.AutoBusyTime,
          callerIDNum: row.callerIDNum,
          email: row.email,
          type: row.type,
          mobile: row.mobile,
          password: '',
          WorkersType: row.inheritedFrom ? 'auxiliaryType' : 'generalType',
          displayName: row.displayName,
          exten: row.exten,
          _id: row._id,
          status: row.status
        }
        this.$nextTick(() => {
          this.$refs.addOrEditAgent.initAgent(_form, false)
          this.$refs.addOrEditAgent.updatePwd()
        })
      },
      addAgent () {
        this.slideLeft = true
        this.section = 'add'
        this.showFooter = true
        this.title = '添加座席'
        const _form = {
          inheritedFrom: '',
          uversion: this.uversion,
          addRole: this.addRole,
          AutoBusyTime: '',
          callerIDNum: '',
          email: '',
          type: 'agent',
          mobile: '',
          password: '',
          WorkersType: 'generalType',
          displayName: '',
          exten: ''
        }
        let that = this
        this.$nextTick(() => {
          this.$refs.addOrEditAgent.initAgent(_form, true, that.currPbxstatus)
          this.$refs.addOrEditAgent.updatePwd()
        })
      },
      batchSuccess1 () {
        this.cancelClick()
      },
      // 批量停用成功
      batchSuccess () {
        this.cancelClick()
        this.reshList()
      },
      // 批量操作分类
      moreOperate (data) {
        console.log(data)
        this.slideLeft = true
        this.section = data
        this.showFooter = true
        if (data === 'batchAdd') {
          this.$nextTick(function () {
            this.$refs.batchAddAgents.resetFormData()
          })
        } else if (data === 'move') {
          this.$nextTick(function () {
            this.$refs.batchMoveAgents.resetShow()
          })
        } else if (data === 'editNum') {
          this.$nextTick(function () {
            this.$refs.numForm.resetFields()
          })
        } else if (data === 'editVer') {
          this.$nextTick(function () {
            this.$refs.editVer.resetFields()
          })
        } else if (data === 'batchDisable') {
          this.$nextTick(function () {
            this.$refs.agentBatchDisable.resetFormData()
          })
        }
        data === 'move' ? this.title = '迁移座席' : data === 'batchAdd' ? this.title = '批量添加' : data === 'editNum' ? this.title = '批量修改外显号' : data === 'editVer' ? this.title = '批量修改座席使用版本' : this.title = '批量停用座席'
      },
      // 修改状态停用
      handledisEnable (row) {
        let data = {
          password: '',
          status: row.status,
          action: row.action || 'update',
          _id: row._id,
          salt: row.salt || 'salt',
          displayName: row.displayName,
          exten: row.exten,
          inheritedFrom: row.inheritedFrom,
          type: row.type,
          mobile: row.mobile,
          email: row.email,
          callerIDNum: row.callerIDNum,
          AutoBusyTime: row.AutoBusyTime,
          uversion: row.uversion,
          Account: row.account,
          PBX: row.PBX || this.pbx
        }
        this.$confirm('确定要停用吗？', this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('disableAgent', data).then((res) => {
            if (res.success) {
              this.$message.success('操作成功！')
              this.reshList()
            }
          })
        })
      },
      // 修改状态启用
      handleEnable (row) {
        let data = {
          password: '',
          status: row.status,
          action: row.action || 'update',
          _id: row._id,
          salt: row.salt || 'salt',
          displayName: row.displayName,
          exten: row.exten,
          inheritedFrom: row.inheritedFrom,
          type: row.type,
          mobile: row.mobile,
          email: row.email,
          callerIDNum: row.callerIDNum,
          AutoBusyTime: row.AutoBusyTime,
          uversion: row.uversion,
          Account: row.account,
          PBX: row.PBX || this.pbx

        }
        this.$store.dispatch('enableAgent', data).then(resp => {
          if (resp && resp.success) {
            this.$message.success('启用成功！')
            this.reshList()
          } else {
            this.$message.error('请先启用主工号')
          }
        })
      },
      // 批量修改外显号
      handleBatchNum () {
        console.log(this.$store.state.session.ivrMap[this.pbx].data.account_user)
        this.$refs['numForm'].validate((valid) => {
          if (valid) {
            let num = this.numForm.numStr.replace(/(^\s*)|(\s*$)/g, '')
            let numArr = null
            if (num === '') {
              this.$message.error('请写入需要修改的坐席工号和对应的外显号码！')
              return
            }
            var numFlag = num.substring(num.length - 1, num.length)
            if (numFlag === ';') {
              num = num.substring(0, num.length - 1)
            }
            if (num.indexOf('；') > -1 || num.indexOf('：') > -1) {
              this.$message.error('内容格式错误，存在中文冒号或者分号！')
              return
            }
            if (num.indexOf(';') > -1 && num.indexOf('\n') > -1) {
              this.$message.error('内容格式错误，回车分隔与分号分隔不能共存！')
              return
            }
            if (num.indexOf(';') !== -1) {
              numArr = num.split(';')
            } else {
              numArr = num.split('\n')
            }
            let agentServiceNum = []
            let agentNum = []
            for (let g = 0; g < numArr.length; g++) {
              let numArrfalg = numArr[g].split(':')
              agentNum.push(numArrfalg[0])
              agentServiceNum.push(numArrfalg[1])
            }
            if (agentServiceNum.length !== agentNum.length) {
              this.$message.error('坐席数量与对应修改的外显号码数量不符，请检查并修改!')
              return
            }
            let accountAgents = []
            if (this.$store.state.session.ivrMap[this.pbx] && this.$store.state.session.ivrMap[this.pbx].data) {
              accountAgents = this.$store.state.session.ivrMap[this.pbx].data.account_user
            }
            let agentIsTrue = false
            let agentIsEnable = false
            let agent = null
            for (let k = 0; k < agentNum.length; k++) { // 校验要修改坐席在该账户中是否存在
              agent = agentNum[k]
              agentIsTrue = false
              agentIsEnable = false
              for (let m = 0; m < accountAgents.length; m++) {
                if (accountAgents[m].exten === agent) {
                  agentIsTrue = true
                  if (accountAgents[m].status === 'enable') {
                    agentIsEnable = true
                  }
                }
              }
              if (!agentIsTrue || !agentIsEnable) {
                break
              }
            }
            if (!agentIsTrue) {
              this.$message.error('该账号中不存在此坐席' + '[' + agent + ']')
              return
            }
            if (!agentIsEnable) {
              this.$message.error('该账号中此坐席' + '[' + agent + ']' + '已经被停用，不允许修改！')
              return
            }
            let agentRepeat = false
            let agentOnly = null
            for (let q = 0; q < agentNum.length; q++) {
              agentOnly = agentNum[q]
              for (let w = 0; w < agentNum.length; w++) {
                if (q !== w && agentOnly === agentNum[w]) {
                  agentRepeat = true
                  break
                }
              }
            }
            if (agentRepeat) {
              this.$message.error('[' + agentOnly + ']' + '坐席信息重复，请检查后重新保存')
              return
            }
            var allInfo = {}
            allInfo.agentNum = agentNum
            allInfo.agentServiceNum = agentServiceNum
            allInfo.account = this.$store.state.session.account.account
            allInfo.pbx = this.pbx
            this.$store.dispatch('batchUpdateAgentNum', allInfo).then(resp => {
              if (resp && resp.success) {
                this.$message.success('批量修改坐席外显号成功')
                this.cancelClick()
                this.reshList()
              } else {
                let message = '有以下信息重复：'
                if (resp.repeatList && resp.repeatList.length > 0) {
                  for (let i = 0; i < resp.repeatList.length; i++) {
                    if (resp.repeatList[i] === 'callerIDNum') {
                      message += '外显号码'
                    }
                  }
                } else {
                  message = '批量修改坐席外显号失败，请重新修改'
                }
                this.$message.error(message)
              }
            })
          }
        })
      },
      // 批量修改版本
      handleEditVer () {
        this.$refs['editVer'].validate((valid) => {
          if (valid) {
            console.log(this.searchArr)
            let _agentIds = []
            for (let i = 0; i < this.searchArr.length; i++) {
              _agentIds.push(this.searchArr[i]._id)
            }
            let data = {
              uversion: this.verForm.batchVersion,
              agentIds: _agentIds
            }
            this.$store.dispatch('batchUpdateUversion', data).then(resp => {
              if (resp && resp.success) {
                this.$message.success('批量修改座席使用版本成功!')
                this.cancelClick()
                this.reshList()
              }
            })
          }
        })
      },
      // 侧滑弹框保存事件
      handleSaveCLick () {
        this.showFooter = true
        if (this.section === 'editVer') {
          this.handleEditVer()
        } else if (this.section === 'batchDisable') {
          // 批量停用
          this.$refs.agentBatchDisable.stopAgents()
        } else if (this.section === 'editNum') {
          this.handleBatchNum()
        } else if (this.section === 'batchAdd') {
          this.$refs.batchAddAgents.saveBatchAddAgents()
        } else if (this.section === 'move') {
          this.$refs.batchMoveAgents.saveBatchMoveAgents()
        } else if (this.section === 'add') {
          this.$refs.addOrEditAgent.saveAddAgents()
        } else if (this.section === 'edit') {
          this.$refs.addOrEditAgent.saveAddAgents()
        }
      },
      // 获取版本名称
      handleVersion (value) {
        let name = ''
        for (let i = 0; i < this.licenceType.length; i++) {
          if (this.licenceType[i].code_value === value) {
            name = this.licenceType[i].code_name
            break
          }
        }
        return name
      },
      // 高级搜索
      searchAgent () {
        let allAgentMes = deepClone(this.dataList)
        let searchResult = []
        let _newSearchResult = []
        if (!this.search.start && !this.search.end) {
          if (this.search.version !== '') {
            if (this.search.externalNumber !== '') {
              for (let k = 0; k < allAgentMes.length; k++) {
                if (allAgentMes[k].uversion === this.search.version && allAgentMes[k].callerIDNum.indexOf(this.search.externalNumber) > -1) {
                  _newSearchResult.push(allAgentMes[k])
                }
              }
            } else {
              for (let k = 0; k < allAgentMes.length; k++) {
                if (allAgentMes[k].uversion === this.search.version) {
                  _newSearchResult.push(allAgentMes[k])
                }
              }
            }
          } else {
            if (this.search.externalNumber !== '') {
              for (let k = 0; k < allAgentMes.length; k++) {
                if (allAgentMes[k].callerIDNum.indexOf(this.search.externalNumber) > -1) {
                  _newSearchResult.push(allAgentMes[k])
                }
              }
            } else {
              _newSearchResult = allAgentMes
            }
          }
          this.query = ''
          this.currentPage = 1
          this.searchArr = _newSearchResult
          this.count = this.searchArr.length
          this.handleFakePage(deepClone(_newSearchResult))
          return
        } else if (this.search.start && this.search.end) {
          if (parseInt(this.search.start) >= parseInt(this.search.end)) {
            this.$message.error('工号的范围有误')
            return
          } else {
            if (allAgentMes.length > 0) {
              for (let i = 0; i < allAgentMes.length; i++) {
                if (parseInt(allAgentMes[i].exten) >= parseInt(this.search.start) && parseInt(allAgentMes[i].exten) <= parseInt(this.search.end)) {
                  searchResult.push(allAgentMes[i])
                }
              }
            }
          }
        } else if (this.search.start && !this.search.end) {
          if (allAgentMes.length > 0) {
            for (let i = 0; i < allAgentMes.length; i++) {
              if (parseInt(allAgentMes[i].exten) >= parseInt(this.search.start)) {
                searchResult.push(allAgentMes[i])
              }
            }
          }
        } else if (!this.search.start && this.search.end) {
          if (allAgentMes.length > 0) {
            for (let i = 0; i < allAgentMes.length; i++) {
              if (parseInt(allAgentMes[i].exten) <= parseInt(this.search.end)) {
                searchResult.push(allAgentMes[i])
              }
            }
          }
        }
        if (this.search.version !== '') {
          if (this.search.externalNumber !== '') {
            for (let i = 0; i < searchResult.length; i++) {
              if (searchResult[i].uversion === this.search.version && searchResult[i].callerIDNum.indexOf(this.search.externalNumber) > -1) {
                _newSearchResult.push(searchResult[i])
              }
            }
          } else {
            for (let i = 0; i < searchResult.length; i++) {
              if (searchResult[i].uversion === this.search.version) {
                _newSearchResult.push(searchResult[i])
              }
            }
          }
          searchResult = _newSearchResult
        } else {
          if (this.search.externalNumber !== '') {
            let _newSearchResult = []
            for (let i = 0; i < searchResult.length; i++) {
              if (searchResult[i].callerIDNum.indexOf(this.search.externalNumber) > -1) {
                _newSearchResult.push(searchResult[i])
              }
            }
            searchResult = _newSearchResult
          }
        }
        this.query = ''
        this.currentPage = 1
        this.searchArr = searchResult
        this.count = this.searchArr.length
        this.handleFakePage(deepClone(this.searchArr))
      },
      // 点击翻页
      trunPages (val) {
        this.currentPage = val
        this.handleFakePage(this.searchArr)
      },
      // 处理分页
      handleFakePage (_array) {
        this.listData = []
        for (let i = (this.currentPage - 1) * 10; i < this.currentPage * 10 && i < _array.length; i++) {
          this.listData.push(_array[i])
        }
      },
      // 点击input搜索
      handlerClick () {
        this.currentPage = 1
        this.searchArr = ivrSearch(this.dataList, this.query, ['displayName', 'exten']) || []
        this.count = this.searchArr.length
        this.handleFakePage(this.searchArr)
      },
      // 导出座席
      exportData () {
        let data = {
          Method: 'exportAgentInfoExcel',
          Query: {
            accountId: this.$store.state.session.account.account,
            condition: this.query,
            pbx: this.pbx
          }
        }
        this.$store.dispatch('exportAgentList', data).then(resp => {})
      },
      // 关闭弹框
      cancelClick () {
        this.slideLeft = false
      },
      // 初始化数据
      fetchData () {
        this.$store.dispatch('refreshUser', {Account: this.$store.state.session.account.account, PBX: this.pbx}).then(resp => {
          if (resp && resp.success) {
            this.$store.commit('SET_IVRMAP_DETAIL', {PBX: this.pbx, typeName: 'account_user', data: resp.list || [], flag: 'data', node: this})
            this.count = resp.list.length
            this.searchArr = deepClone(resp.list)
            this.dataList = deepClone(resp.list)
            this.handleFakePage(resp.list)
          }
        })
      },
      getCurrPbxState () {
        this.$store.dispatch('checkPbxLoadInfo', {'pbxId': this.pbx}).then((state) => {
          this.currPbxstatus = state
        })
      },
      // 点击刷新
      reshList () {
        this.search = {
          start: '',
          end: '',
          version: '',
          externalNumber: ''
        }
        this.query = ''
        this.currentPage = 1
        this.fetchData()
      }
    },
    deactivated () {
      this.oldPBX = this.pbx
    },
    activated () {
      if (this.oldPBX !== this.pbx) {
        this.reshList()
      }
    },
    beforeMount () {
      this.getCurrPbxState()
      let p1 = this.$store.dispatch('getCache', {type: 'licenceType'})
      let p2 = this.$store.dispatch('getCache', {type: 'roles'})
      let self = this
      Promise.all([p1, p2]).then(([res1, res2]) => {
        if (this.flag === 'ecommerce') {
         self.licenceType = res1.filter(item => {
           return item.flag && item.flag === 'ecommerce'
         })
        } else {
          self.licenceType = res1
        }
        if (self.licenceType.length !== 0) {
          self.uversion = self.licenceType[0].code_value
        }
        for (let i = 0; i < self.licenceType.length; i++) {
          if (self.licenceType[i].code_value === 'enterprise') {
            self.uversion = self.licenceType[i].code_value
            break
          }
        }
        self.roles = res2
        if (self.roles.length !== 0) {
          self.addRole = self.roles[0]._id
        }
        for (let i = 0; i < self.roles.length; i++) {
          if (self.roles[i].display_name === '座席') {
            self.addRole = self.roles[i]._id
            break
          }
        }
        self.fetchData()
      })
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .margin-t-15
    margin-top 15px
  .agent-call-manage
    margin 20px
    overflow-y hidden
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    font-size: 12px;
    .margin-l-10
      margin-left 10px
    .pag-wapper
      position: absolute;
      right: 15px;
      top: 14px;
    .main-color
      color $c-main
      cursor pointer
    .wapper
      display flex
      flex-direction column
    .tool
      position relative
      border 1px solid #e7e7eb
      border-bottom 0
      padding  12px 15px
      /*display flex*/
      justify-content space-between
    .primary_btn
      padding 0px 10px
      min-width 60px
    .pink
      color $c-pink
      cursor pointer
    .prompt
      color $c-prompt
</style>

